<template>
  <div class="login">
    <div class="account">
      账号：
      <input type="text" v-model="phone" />
    </div>
    <div class="password">
      密码：
      <input type="text" v-model="password" />
    </div>
    <div class="btn" @click="login">登录</div>
  </div>
</template>  

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      phone: "",
      password: "",
    };
  },
  watch: {},
  computed: {},
  methods: {
    async login() {
      let data = await this.$store.dispatch("loginCellphone", {
        phone: this.phone,
        password: this.password,
      });
      if (data.code == 200) {
        this.$router.push("/me");
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.login {
  text-align: center;
  input {
    border: 1px solid #666;
    border-radius: 0.5rem;
    height: 0.6rem;
    line-height: 0.6rem;
    width: 4rem;
    padding: 0 0.2rem;
  }
  input:focus {
    outline: none;
  }
  .account {
    margin: 2rem 0 0.5rem 0;
  }
  .btn {
    width: 5rem;
    height: 0.8rem;
    line-height: 0.8rem;
    color: #fff;
    background: orangered;
    border-radius: 0.5rem;
    margin: 1rem auto 0;
  }
}
</style>